<template>
  <div class="hanmoBox">
    <div>
      <img :src="bannerImg" class="banner"/>
    </div>
    <van-icon name="play-circle-o" v-if="!play" size="48" style="    margin-left: 0.3rem;"/>
    <van-icon name="pause-circle-o" v-else size="48" style="margin-left: 0.3rem;"/>
    <br/>
    <div class="circleBox">
      <span class="circleBig" @click="changeFont('big')"></span>
      <span class="circleSmall" @click="changeFont('small')"></span>
    </div>
    <div class="content" ref="content">
      若有人兮山之阿，被薜荔兮带女萝。<br/>
      既含睇兮又宜笑，子慕予兮善窈窕。<br/>
      乘赤豹兮从文狸，辛夷车兮结桂旗。<br/>
      被石兰兮带杜衡，折芳馨兮遗所思。<br/><br/>
      <span style="width:6.5rem;">余处幽篁兮终不见天，</span><br/>路险难兮独后来。<br/>
      表独立兮山之上，云容容兮而在下。<br/>
      杳冥冥兮羌昼晦，东风飘兮神灵雨。<br/>
      留灵修兮儋忘归，岁既晏兮孰华予？<br/><br/>
      米二秀兮於山间，石磊磊兮易曼曼。<br/>
      怨公子兮怅忘归，君思我兮不得闲？<br/>
      山中人兮芳杜若，饮石泉兮荫松柏。<br/><br/>
      君思我兮然疑作，雷填填兮雨冥冥。<br/>
      猿啾啾兮狖夜鸣，风飒飒兮木萧萧。<br/>
      思公子兮徒离忧。<br/><br/><br/>
    </div>
    <div style="text-align: right;
    margin-right: 1rem;
    padding-bottom: 0.5rem;">
      <van-icon name="plus" size="27" color="#ffbeff" />
      <br/>
      <van-icon name="arrow-left" size="27" color="#ffbeff" />
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      play: false,
      bannerImg: require('@/assets/hanmowen.png')
    }
  },
  methods: {
    changeFont(f) {
      if( f === "small") {
        this.$refs.content.style.fontSize = "0.5rem"
        this.$refs.content.style.width = "8rem"
      } else {
        this.$refs.content.style.fontSize = "0.7rem"
        this.$refs.content.style.width = "6rem"
      }
    }
  }
}
</script>
<style scoped>
.circleBox {
  position: fixed;
    margin-top: 2rem;
    margin-left: 8.5rem;
    width: 1rem;
    height: 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
}
.banner {
  background-size: cover;
  width: 100%;
  height: 8rem;
  margin-bottom: 0.5rem;
}
.content {
      margin-left: 0.3rem;
    font-size: 0.5rem;
    margin-top: 1.6rem;
}
.verticalTitle {
  width: 2rem;
  font-size: 2rem;
  display: inline-block;
}
.bannerImg {
  width: 16rem;
}
.hanmoBox {
  color: #ffbeff;
  background: #0044ae;
}
.circleSmall {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  background: #ffbeff;
  border-radius: 0.5rem;
}
.circleBig {
  display: inline-block;
  width: 0.8rem;
  height: 0.8rem;
  background: #ffbeff;
  border-radius: 0.8rem;
}
</style>